{# empty Twig template #}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap-datetimepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('bootstrap/css/smoothness/jquery-ui-1.10.3.custom.min.css') }}" />
{% endblock %}
    
{% block body %}

    <div class="alert alert-info">
            Actividades de: <strong>{{ alumno.nombreCompleto }}</strong>.
            Escoja la fecha de Falta y luego seleccione el día y horario para añadir el evento.
    </div>                      
    <div class="text-center" >                      
        <div id="datetimepicker1" class="input-append date">
            <input id="fechaFalta" data-format="dd-MM-yyyy" type="text" class="input-small" disabled="disabled"></input>
            <span class="add-on">
                <i data-date-icon="icon-calendar"></i>
            </span>
        </div>          
    </div>                      
    <table id="table" class="table table-nomargin dataTable table-striped table-hover">
        <thead>
        <tr>
        {% for clase in Clases %}            
            <th style="text-align: center;">
                <div class="btn btn-mini btn-info" id="clase-{{clase.id}}">
                    {{clase.dia}} - {{clase.horario |date('H:i')}}Hs. <i class=" icon-plus-sign"/>
                </div>
            </th>   
        {% endfor %}
        </tr></thead>
        <tbody></tbody>
    </table>
    <div id="tablaFaltas">
        <table id="table" class="table table-nomargin table-bordered dataTable table-striped table-hover">
            <thead>
                <tr>
                    <th style="text-align: center;">Día de inasistencia</th>   
                    <th style="text-align: center;">Fecha y hora</th>
                    <th style="text-align: center;">Código de clase</th>
                    <th style="text-align: center;">Lo ocupó</th>
                    <th style="text-align: center;">Devolver día</th>  
                </tr>
            </thead>
            <tbody>
            {% for avisoFalta in avisosFaltas %}            
               <tr>
                   <td style="text-align: center;">{{ avisoFalta.dia }}</td>
                   <td style="text-align: center;">{{ avisoFalta.fechaFalta }}</td>
                   <td style="text-align: center;">{{ avisoFalta.clase }}</td>
                    {% if avisoFalta.libre %}
                        <td style="text-align: center;">-</td>
                        <td style="text-align: center;">
                            <div class="btn-link" id="disableDay-{{ avisoFalta.id }}">
                                <i class="icon-undo"></i> Devolver
                            </div>
                        </td>
                    {% else %}
                        <td style="text-align: center;">{{ avisoFalta.alumnoRecupera.nombreCompleto }}</td>
                        <td style="text-align: center;">
                            <i class="icon-ban-circle"></i> Ocupado
                        </td>
                    {% endif %}
               </tr>
           {% endfor %}
           </tbody>
        </table>
    </div>
            
    <div id="msgFaltaAlumno"></div>
{% endblock %}
    <div  id="dialog-confirm" title="Asignar falta a la fecha:">
        <p class="hidden" id="dialog-body"></p>
    </div>


{% block javascripts %}
<!-- Theme scripts -->
<script src="{{ asset('bootstrap/js/jquery-1.9.1.js') }}"></script>   
<script src="{{ asset('bootstrap/js/jquery-ui-1.10.3.custom.min.js') }}"></script>
<script src="{{ asset('bootstrap/js/bootstrap-datetimepicker.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){  
            
            $(function() {
                $('#datetimepicker1').datetimepicker({
                    language: 'es-ES',
                    pickDate: true,            // disables the date picker
                    pickTime: false
                });
            });
            
            function asignarFaltaClase(data, id_Clase, id_Alumno, fechaFalta, Row){                
                $('#dialog-body').replaceWith('<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Asignar falta a la fecha del Alumno. ¿Está seguro de seguir?');
                $( "#dialog-confirm" ).dialog({
                    resizable: false,
                    height:200,
                    modal: true,
                    buttons: {
                        "Agregar Falta": function() {
                            $.ajax({
                                type:"POST",
                                url: data,
                                data: {'id_Clase':id_Clase, 'id_Alumno':id_Alumno, 'fechaFalta':fechaFalta},
                                dataType: 'json',
                                success:function(result){
                                    if(result.event === 'success'){
                                        $('#msgFaltaAlumno').html(
                                                '<div class="alert alert-success">'+
                                                    '<strong>Felicitaciones!</strong> La falta del día que seleccionó ('+result.diaEscogido+'),'+
                                                    'fue almacenada con exito</div>'         
                                        );
                                        location.reload();
                                    } else if(result.event === 'fail'){
                                        $('#msgFaltaAlumno').html(
                                                '<div class="alert alert-error">'+
                                                    '<strong>Error!</strong> La fecha que seleccionó (es: '+result.diaEscogido+'), y no corresponde'+
                                                        'con el día de actividad ('+result.diaActividad+') que escogió. Vuelva a intentar...'+
                                                '</div>'         
                                        );
                                    } else if(result.event === 'exist'){
                                        $('#msgFaltaAlumno').html(
                                                '<div class="alert alert-error">'+
                                                    '<strong>Error!</strong> La fecha que seleccionó ('+result.diaEscogido+'), y horario de la clase'+
                                                        ' ya se encuentra registrada, como falta, a este usuario. Vuelva a intentar...'+
                                                '</div>'         
                                        );
                                    };
                                }
                            });
                            $( this ).dialog( "close" );
                            return false; // prevents default behavior 
                        },
                        Cancelar: function() {
                           $( this ).dialog( "close" );
                        }
                    }
                });
            };
        
            {% for clase in Clases %}          
                $('#clase-{{clase.id}}').click(function(){  
                    var Row= $(this).closest("tr");
                    asignarFaltaClase("{{ path('avisos_falta_new') }}", 
                                 "{{clase.id}}", 
                                 "{{alumno.id}}", 
                                 $('#fechaFalta').val(), Row);                                                       
                });                   
            {% endfor %}
            
            function deleteDay(data, Row){                
                $('#dialog-body').replaceWith('<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Devolver día de falta al Alumno. ¿Está seguro de seguir?');
                $( "#dialog-confirm" ).dialog({
                    resizable: false,
                    height:200,
                    modal: true,
                    buttons: {
                        "Devolver Día": function() {
                            $.post(data); 
                            Row.remove(); // remove row                       
                            $( this ).dialog( "close" );
                            return false; // prevents default behavior 
                        },
                        Cancelar: function() {
                           $( this ).dialog( "close" );
                        }
                    }
                });
            };
            
            {% for avisoFalta in avisosFaltas %}
                {% if avisoFalta.libre %}
                    $('#disableDay-{{ avisoFalta.id }}').click(function(){
                        var Row= $(this).closest("tr");
                        deleteDay("{{ path('avisos_falta_delete', {'id': avisoFalta.id}) }}", Row);
                    });
                {% endif %}
            {% endfor %}
                      
        });
    </script>
{% endblock %}